<script setup>
// import {ref} from 'vue'
import { useRouter } from 'uniapp-router-next'
import { useUserStore } from '@/stores/index'
import { logout } from '@/api/my'
const userStore = useUserStore()
const router = useRouter()
// const memberInfo=ref({
//   username:'123',
//   avatar:'https://uview-plus.jiangruyi.com/h5/static/uview/album/noExist.jpg',
//   sex:'male',
//   college:'sc',
//   email:'123@456.com',
//   identity:'student'
// })
const isSigned = true

// 退出登录
const handleLogout = async () => {
  const res = await logout()
  if (res.code === 200) {
    userStore.removeToken()
    userStore.removeInfo()
  }
  uni.showModel({
    title: '退出成功',
    icon: 'success',
  })
  uni.switchTab({ url: '/pages/homePage/index' })
}

const handleToTest = () => {
  router.navigateTo({
    path: '/pages/loginPage/index',
    query: {
      name: 'name',
    },
  })
}

const displayInfo = () => {
  if (!userStore.token) {
    uni.showModal({
      title: '请先登录',
      content: '将跳转到登录页',
      showCancel: true,
      success: ({ confirm }) => {
        if (confirm) {
          router.navigateTo({
            path: '/pages/loginPage/index',
          })
        }
      },
    })
  } else {
    router.navigateTo({
      path: '/pages/myInfoPage/index',
    })
  }
}

const displayPrograms = () => {
  if (!userStore.token) {
    uni.showModal({
      title: '请先登录',
      content: '将跳转到登录页',
      showCancel: true,
      success: ({ confirm }) => {
        if (confirm) {
          router.navigateTo({
            path: '/pages/loginPage/index',
          })
        }
      },
    })
  } else {
    router.navigateTo({
      path: '/pages/myProjectPage/index',
    })
  }
}

const handleChange = () => {
  if (!checkSigned()) {
    router.navigateTo({
      path: '/pages/changePasswordPage/index',
      query: {
        name: 'name',
      },
    })
  }
}

const checkSigned = () => {
  if (!isSigned) {
    setTimeout(() => {
      uni.showToast({
        title: '请先登录',
        icon: 'error',
        duration: 1000,
      })
    }, 300)
    router.navigateTo({
      path: '/pages/loginPage/index',
      query: {
        name: 'name',
      },
    })

    return
  }
}
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const navBarTop = menuButtonInfo.top
const navBarHeight = menuButtonInfo.height
</script>

<template>
  <view class="content">
    <view class="header" :style="{ paddingTop: navBarTop + 'px', lineHeight: navBarHeight + 'px' }"
      ><h2>个人中心</h2></view
    >
    <div class="user-wrapper" :style="{ paddingTop: navBarTop + navBarHeight + 15 + 'px' }">
      <view v-if="!userStore.token" class="userbar-notSigned">
        <u-avatar src="../../static/noExist.jpg" size="60"></u-avatar>
        <span class="username">未登录</span>
        <div class="gap"></div>
        <up-button text="用户登录" :plain="true" shape="circle" type="primary" @click="handleToTest"></up-button>
      </view>
      <view v-if="userStore.token" class="userbar-notSigned">
        <u-avatar :src="userStore.userInfo.avatar ?? '../../static/noExist.jpg'" size="60"></u-avatar>
        <span class="username">{{ userStore.userInfo.name }}</span>
        <div class="gap"></div>
        <up-button text="退出登录" :plain="true" shape="circle" type="primary" @click="handleLogout"></up-button>
      </view>
    </div>

    <div class="function-container">
      <view class="function upperRound" @click="displayInfo">
        <image src="../../static/myP-1.png"></image>
        <span>个人信息</span>
        <div class="gap"></div>
        <image src="../../static/myArrow.png"></image>
      </view>
      <view class="function" @click="displayPrograms">
        <image src="../../static/myP-2.png"></image>
        <span>我的项目</span>
        <div class="gap"></div>
        <image src="../../static/myArrow.png"></image>
      </view>
      <view class="function lowerRound" @click="handleChange">
        <image src="../../static/myP-3.png"></image>
        <span>修改密码</span>
        <div class="gap"></div>
        <image src="../../static/myArrow.png"></image>
      </view>
    </div>
  </view>
</template>

<style scoped lang="scss">
page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: Rgb(239, 240, 244);
}
.content {
  min-height: 100vh;
  background-color: Rgb(239, 240, 244);
  .header {
    display: flex;
    justify-content: center;
    position: fixed;
    width: 100%;
    text-align: center;
    background-color: Rgb(239, 240, 244);
    line-height: 100px;
    font-size: 40rpx;
  }
  .user-wrapper {
    align-items: center;

    margin-bottom: 10px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    .userbar-notSigned {
      align-items: center;
      margin-left: 40px;
      width: 100%;
      display: flex;
      height: 250px;
      flex-direction: row;
      justify-content: center;
      height: 100vh;
      .u-avatar {
        flex-grow: 1;
      }
      .username {
        margin-left: 10px;
        flex-grow: 1;
      }
      .gap {
        flex-grow: 3;
      }
      ::v-deep.u-button {
        background-color: Rgb(239, 240, 244);
        color: rgb(83, 133, 225);
      }
    }
  }
  .function-container {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    margin: 25px 30px 0 20px;

    .function {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 95%;
      height: 75px;
      background-color: white;

      padding-left: 20px;
      padding-right: 10px;
      border-bottom: 1px dashed #e0dfdf;
      image {
        width: 35px;
        height: 35px;
      }
      span {
        font-size: 30rpx;
        font-weight: bold;
        flex-grow: 2;
        color: rgb(74, 87, 109);
      }
      .gap {
        flex-grow: 5;
      }
    }
    .lowerRound {
      border-bottom: none;
      border-radius: 0 0 15px 15px;
    }
    .upperRound {
      border-radius: 15px 15px 0 0;
    }
  }
}
</style>
